<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins.">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Introduction to Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">
        <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
            <h5>Table of contents</h5>
            <hr/>
            <ul class="toc-nav">
                <li class="toc-entry"><a href="#_quick_start">Quick start</a></li>
                <li class="toc-entry"><a href="#_starter_template">Starter template</a></li>
                <li class="toc-entry"><a href="#_html_5">HTML5 doctype</a></li>
                <li class="toc-entry"><a href="#_responsive_meta">Responsive meta tag</a></li>
                <li class="toc-entry"><a href="#_short_demo">Short demo</a></li>
            </ul>
        </div>

        <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
            <div class="place-right d-none d-block-lg" style="width: 200px;">
                <img src="images/logo.png" class="w-100" alt="">
            </div>

            <h1>Introduction</h1>
            <p class="text-leader">
                Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.
            </p>

            <!-- ads-html -->

            <h3 id="_quick_start">Quick start</h3>
            <p>
                Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at <a href="https://www.keycdn.com/">KeyCDN</a>.
                Using a package manager or need to download the source files? Go to to the <a href="download.html">downloads page</a>.
            </p>

            <p>
                Copy-paste the stylesheet <span class="tally">&lt;link&gt;</span> into your <span class="tally">&lt;head&gt;</span> before all other stylesheets to load our CSS.
            </p>

            <pre class=""><code>
                &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css"&gt;
            </code></pre>
            <div class="remark warning">
                For production, we recommend specifying a specific version and build to avoid unexpected breakdowns when new versions are released:
                <pre class=""><code>
                    &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css"&gt;
                </code></pre>
            </div>

            <p>
                If you need only general part of styles, use this links:
            </p>

            <pre class=""><code>
                &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro.min.css"&gt;
                &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-colors.min.css"&gt;
                &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-rtl.min.css"&gt;
                &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-icons.min.css"&gt;
            </code></pre>

            <p class="text-bold">
                Add javascript part before the closing <span class="tally">&lt;/body&gt;</span> tag.
            </p>

            <pre class=""><code>
                &lt;script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"&gt;&lt;/script&gt;
            </code></pre>

            <div class="remark warning">
                For production, we recommend specifying a specific version and build to avoid unexpected breakdowns when new versions are released:
                <pre class=""><code>
                    &lt;script src="https://cdn.metroui.org.ua/v4.3.2/js/metro.min.js"&gt;&lt;/script&gt;
                </code></pre>
            </div>

            <p>
                And that’s it - you’re on your way to a fully Metro 4 site. If you’re at all unsure about the general page structure, keep reading for an example page template.
            </p>

            <!-- ads-html -->

            <h3 id="_starter_template">Starter template</h3>
            <p>
                Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
            </p>

            <pre class=""><code>
                &lt;!DOCTYPE html&gt;
                &lt;html lang="en"&gt;
                  &lt;head&gt;
                    &lt;!-- Required meta tags --&gt;
                    &lt;meta charset="utf-8"&gt;
                    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;

                    &lt;!-- Metro 4 --&gt;
                    &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css"&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                    &lt;h1&gt;Hello, world!&lt;/h1&gt;

                    &lt;!-- Metro 4 --&gt;
                    &lt;script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"&gt;&lt;/script&gt;
                  &lt;/body&gt;
                &lt;/html&gt;
            </code></pre>

            <p>That’s all you need for overall page requirements.</p>

            <h3 id="_html_5">HTML5 doctype</h3>
            <p>
                Metro 4 requires the use of the HTML5 <span class="tally">doctype</span>.
            </p>

            <pre class=""><code>
                &lt;!DOCTYPE html&gt;
                &lt;html lang="en"&gt;
                  ...
                &lt;/html&gt;
            </code></pre>

            <h3 id="_responsive_meta">Responsive meta tag</h3>
            <p>
                Metro 4 is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
                To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <span class="tally">&lt;head&gt;</span>
            </p>

            <pre class=""><code>
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
            </code></pre>

            <h3 id="_short_demo">Short demo</h3>
            <div class="example bg-dark fg-white">
                <h1 class="text-center">Metro 4</h1>
                <h3 class="text-center">The Components Library</h3>
                <div data-role="cube" data-flash-color="#6a00ff"></div>
            </div>

            <pre class=""><code>
                &lt;!DOCTYPE html&gt;
                &lt;html lang="en"&gt;
                  &lt;head&gt;
                    &lt;meta charset="utf-8"&gt;
                    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
                    &lt;link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css"&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                    &lt;h1 class="text-center"&gt;Metro 4&lt;/h1&gt;
                    &lt;h3 class="text-center"&gt;The Components Library&lt;/h3&gt;
                    &lt;div data-role="cube"&gt;&lt;/div&gt;

                    &lt;script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"&gt;&lt;/script&gt;
                  &lt;/body&gt;
                &lt;/html&gt;
            </code></pre>
        </main>
    </div>
</div>

    <script src="docsearch/docsearch.min.js"></script>
    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>